<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- vue绑定事件
      可以在""中书写js语句,(不要用原生js提供的属性或方法,默认会去实例中找,可以直接操作实例上的数据或方法),方法不能直接写在data中,1.data中是用来保存数据的,2.data中的方法this指向undefined,无法获取数据


      事件对象及事件函数传参
      1.事件函数不调用,可以正常触发
      2.事件函数调用,也可以正常触发
      3.在事件函数调用时实参书写固定字符$event,形参用字符接收,接收到的就是事件对象,书写其他数据,传过去的就是数据
      4.实参不调用,形参用字符接收,接收的就是事件对象


      v-on的修饰符.
      1.stop:阻止事件传播,要在最里面写
      2.prevent:阻止默认行为(如右键(contextmenu),常用于input表单submit提交)
      3.capture:将事件传播转换为捕获,上层都要写,
      4.once.事件值执行一次,之后都不执行了
      5.self,需要判断事件的e.target是不是自己,是自己才执行


-->

    <h1>{{count}}</h1>
    <button v-on:click="add1(5)">add传n,点击累加1</button>
    <button v-on:click="add2($event)">点击累加2</button>
    <button v-on:click="decrement">点击累加3</button>

  </div>
  <script>
    Vue.config.productionTip = false
    const vm = new Vue({
      el: "#app",
      data() {
        return {
          msg: "hello vue",
          count: 0
        }
      },
      methods: {
        add() {
          this.count++
        },
        decrement(e) {
          console.log(e,'e');
          this.count--
        },
        add1(n) {
          this.count += n
        },
        add2(e) {
          console.log(e,'e');

        }
      }
    })
  </script>
</body>

</html>